<template>
  <div class="app-container bg-white">
    <div class="page-body">
      <el-form size="small" :inline="true">
        <el-form-item>
          <el-input size="small" placeholder="请输入商品属性" v-model.trim="queryName" maxlength="10" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" class="width_104" type="primary" @click="getPageDataList()">查询</el-button>
          <el-button size="small" class="width_104" @click="resetOption()">重置</el-button>
        </el-form-item>
      </el-form>
       <div>
        <el-button size="mini" type="success" icon="el-icon-document-add" @click="addOption()" v-if="roleBtns.includes('sys:properties:save') || $store.getters.isAdmin">新建属性</el-button>
        <!-- <el-tooltip content="商品属性将补充至商品信息中，商家需在编辑商品时选择对应的属性值，可用于手机端的筛选。最多支持10个属性。" placement="bottom" effect="light">
          <i class="el-icon-question pointer margin_left_6"></i>
        </el-tooltip> -->
        <el-button size="mini" type="primary" icon="el-icon-download" @click="exportOption()" class="fr">批量导出</el-button>
        <el-button size="mini" type="danger" icon="el-icon-delete" @click="allRemoveOption()" v-if="roleBtns.includes('sys:properties:remove') || $store.getters.isAdmin">批量删除</el-button>
      </div>
      <!-- 数据列表 -->
      <el-table class="margin_top_20" :data="pageData" stripe :header-cell-style="tableHeaderStyle" v-loading="loading" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="42"></el-table-column>
        <el-table-column prop="propertyName" label="属性名称">
          <template slot-scope="scope">
            <div class="text-ellipsis_2" :title="scope.row.propertyName">{{scope.row.propertyName}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="propertyNo" label="属性编码">
          <template slot-scope="scope">
            <div class="text-ellipsis_2" :title="scope.row.propertyNo">{{scope.row.propertyNo}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="subtitle" label="属性描述">
          <template slot-scope="scope">
            <div class="text-ellipsis_2" :title="scope.row.subtitle">{{scope.row.subtitle}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <!-- <span v-if="scope.row.status == 1">正常</span>
            <span v-else>隐藏</span> -->
            <el-switch @change="changeStatus($event, scope.row)" :value="scope.row.status == 1" :disabled="!(roleBtns.includes('sys:properties:update_tatus') || $store.getters.isAdmin)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <button class="my-btn my-btn--mini my-btn--primary plain" @click="editOption(scope.row.id)" v-if="roleBtns.includes('sys:properties:update') || $store.getters.isAdmin">编辑</button>
            <button class="my-btn my-btn--mini my-btn--danger plain" @click="removeItemsOption(scope.row.id)" v-if="roleBtns.includes('sys:properties:remove') || $store.getters.isAdmin">删除</button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="text-center">
      <el-pagination background @size-change="handleSizeChange" @current-change="handlePagingChange" :current-page="pageIndex" :page-sizes="pageSizes"
        :page-size="pageSize" :layout="paginationLayout" :total="pageCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Setting from '@/settings';
import { mapGetters } from 'vuex';
import { GetStoreAttrListByParams, DeleteStoreAttrItem, GetStoreClassList, ChangeStoreAttrStatus } from '@/views/store-management/services/index';

export default {
  name: 'StoreAttribute',
  data() {
    return {
      queryName: '',
      classIds: [],
      pageSize: Setting.defaultTablePaginationSize,
      pageSizes: Setting.tablePaginationSizes,
      tableHeaderStyle: Setting.tableHeaderStyle,
      paginationLayout: Setting.tablePaginationLayout,
      pageIndex: 1,
      pageData: [],
      pageCount: 0,
      loading: false,
      storeClassList: [],
      multipleSelection: [],
      defaultProps: {
        value: 'id',
        label: 'title',
        children: 'goodsCategoryModelList',
        // multiple: true
      }
    }
  },
  watch: {
    '$route' () {
      this.getPageDataList();//我的初始化方法
    }
  },
  activated() {
    this.getStoreClassList();
  },
  created() {
    this.getStoreClassList();
  },
  computed: {
    ...mapGetters(['roleBtns'])
  },
  // 页面加载完成之后
  mounted() {
    this.getPageDataList();
  },
  methods: {
    changeStatus(event, rowData) {
      this.loading = true;
      ChangeStoreAttrStatus({
        id: rowData.id,
        status: event ? 1 : 0,
      })
      .finally(() => (this.loading = false))
      .then(data => {
        if (data.code == 200) {
          this.$message.success((event ? '启用' : '禁用') + '成功!');
          rowData.status = event ? 1 : 0;
        } else {
          this.$message.error((event ? '启用' : '禁用') + '失败!');
        }
      })
    },
    // 新增或编辑按钮操作
    addOption() {
      this.$router.push({
        name: 'StoreAttributeAdd'
      })
    },
    editOption(rowId) {
      this.$router.push({
        name: 'StoreAttributeEdit',
        query: { id: rowId }
      })
    },
    allRemoveOption() {
      if (!this.multipleSelection || !this.multipleSelection.length) {
        this.$message.warning('请选择需要删除的属性!');
        return;
      }
      this.removeItemsOption(this.multipleSelection.map(item => item.id).join(','));
    },
    removeItemsOption(nodeIds) {
      this.$confirm('此操作将永久删除该属性, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        closeOnPressEscape: false,
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
            DeleteStoreAttrItem({ targetIds: nodeIds })
              .then(data => {
                instance.confirmButtonLoading = false;
                if (data.code == 200) {
                  this.$message.success('删除成功!');
                  done()
                } else {
                  this.$message.success('删除失败!');
                }
              })
              .catch(error => {
                instance.confirmButtonLoading = false;
              })
          } else {
            done();
          }
        }
      }).then(() => {
        this.getPageDataList();
      })
    },
    // 批量导出
    exportOption() {
      this.loading = true
      let search = {
        search: this.queryName
      }
      // const searchData = JSON.parse(JSON.stringify(search))

      this.blobAxiosApi('get', '/cloudApi/goods/excel/exportGoodsProperties', search, '商品属性导出文件.xlsx').finally(() => (this.loading = false))
    },

    // 重置操作
    resetOption() {
      this.queryName = '';
      this.classIds = [];
      this.pageIndex = 1;
      this.getPageDataList();
    },

    // 获取页面数据列表
    getPageDataList() {
      this.loading = true;
      GetStoreAttrListByParams({
        search: this.queryName,
        targetIds: this.classIds.length ? this.classIds[this.classIds.length - 1] : null,
        pageSize: this.pageSize,
        pageNum: this.pageIndex
      })
      .then(data => {
        if (data.code == 200) {
          this.pageData = data.data.list;
          this.pageCount = data.data.total;

          if ((!data.data.list || !data.data.list.length) && this.pageIndex > 1) {
            this.pageIndex = 1;
            this.getPageDataList();
          }
        }
        setTimeout(() => {
          this.loading = false;
        }, 300);
      })
      .catch(error => {
        this.loading = false;
      })
    },
    handleSelectionChange(selectlist) {
      this.multipleSelection = selectlist;
    },
    // 分页列表改变
    handlePagingChange(event) {
      this.pageIndex = event;
      this.getPageDataList();
    },
    handleSizeChange(event) {
      this.pageIndex = 1;
      this.pageSize = event;
      this.getPageDataList();
    },
    getStoreClassList() {
      GetStoreClassList()
      .then(data => {
        this.storeClassList = data.data;
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form .el-input {
  width: 224px !important;
}

.width_104 {
  width: 104px;
}
</style>
